<template>
    <h3>轮播图列表</h3>
    <!-- 表格 -->
    <div class="banner-table">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="index" label="序号" width="90" />
            <el-table-column prop="title" label="广告标题" width="380" />
            <el-table-column label="图片" width="400">
                <template #default="scope">
                    <img style="width: 200px;" v-if="scope.row.imgUrl" :src="scope.row.imgUrl">
                </template>
            </el-table-column>
            <el-table-column label="广告链接" width="180">
                <template #default="scope">
                     <a :href="scope.row.href">链接</a>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import { photoDelete, removeBanner, getBannerList } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus'
import api from '../../api/index'

// 定义每一项数据的属性类型
type Item = {
    index?: number,
    id: string|number
    title: string
    imgUrl: string
    href?: string | number
}

// 表格数据
const tableData = ref<any>([])

// 点击删除轮播图
const handleDelete = (index: number, row: any) => {
    // console.log(index, row)
    // 获取当前点击的选项
    let { id, imgUrl, title } = row;
    console.log({ id, imgUrl, title } )
    ElMessageBox.confirm(
        `是否删除这个“${title}”的轮播图?`,
        '警告',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            // console.log("1")
            // 删除轮播图
            await removeBanner({ id })
                .then(
                    content => {
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )


          getBannerListFn()
                // console.log("2")
            // 删除轮播图对应的图片
            await photoDelete({ picUrl: imgUrl })
                .then(
                    content => {
                        // console.log(content);
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )
                .catch(
                    err=>{
                        console.log(err)
                    }
                )
            // 删除程序中数组对应的数据
            // tableData.value.splice(index, 1);
          
        })
        .catch((action: Action) => {
            // console.log("点击取消")
        })

}

// 获取考试轮播图
const getBannerListFn = async () => {
    await getBannerList()
        .then(
            content => {
                // console.log(content)
                let { code, result } = content;
                if (code == 200) {
                    // 整合后台数据
                    let arr = result.map((item: Item, index: number) => {
                        item.index = index + 1;
                        item.imgUrl = api.url + item.imgUrl
                        return item;
                    })
                    tableData.value = arr;
                }
            }
        )
}
getBannerListFn();

</script>